<script setup lang="ts">
  import topBg from './top-bg.png'
  import bottomBg from './bottom-bg.png'

  defineProps<{
    title: string
  }>()
</script>

<template>
  <view class="board">
	  <view class="board-title" >
		  <text>{{ title }}</text>
	  </view>
    <!-- <image class="bg-top" :src="topBg" mode="scaleToFill" /> -->
    <view class="board-content">
      <slot />
    </view>
    <!-- <image class="bg-bottom" :src="bottomBg" mode="scaleToFill" /> -->
  </view>
</template>

<style scoped>
  .board {
    background-color: inherit;
    width: 100%;
    font-size: 0;
    position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
  }
  .board-title {
	width: 83px;
    color: white;
    height: 33px;
    font-size: 16px;
    font-weight: 900;
	text-align: center;
    line-height: 30px;
	padding-left: 2px;
    color: rgba(47, 118, 236, 1);
	background-image: url(../../static/fahuo_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
  }
  .board-content {
    color: #C2C2C2;
    font-size: 10px;
    /* border-left: 1rpx solid #2F76EC; */
    /* border-right: 1rpx solid #D85AE7; */
    padding: 10rpx;
    font-family: Arial, 'Noto Sans SC';
	flex: 1;
  }
  .bg-top {
    height: 60rpx;
    width: 100%;
  }
  .bg-bottom {
    height: 16rpx;
    width: 100%;
  }
</style>
